---
title: Esimerkit
description: Ennen ja jälkeen -esimerkit Ultraciten toiminnasta.
---

To illustrate Ultracite’s capabilities, here are a few practical examples of issues it catches and fixes. Each example shows code before (with a problem) and after Ultracite is applied. These examples demonstrate how Ultracite improves code automatically.

## Automaattinen koodin muotoilu

### Ennen (sekava muotoilu)

```tsx title="page.tsx"
function greet(name) { return 'Hello, '+ name + "!!" }
```

Tässä koodissa välit ja yhdistelytapa ovat pielessä. Se käyttää myös merkkijonojen yhdistämistä template-literalien sijaan, ja kakso- ja yksinkertaiset lainausmerkit on sekoitettu.

### Jälkeen (muotoiltu)

```tsx title="page.tsx"
function greet(name) {
  return `Hello, ${name}!!`;
}
```

Ultraciten muotoilija on:

- Muotoillut funktion sopivilla rivinvaihdoilla luettavuuden parantamiseksi.
- Muuntanut merkkijonojen yhdistämisen mallipohjaiseksi merkkijonoksi (template literal) (tämä voi olla automaattinen korjaus lint-säännöstä, joka suosittelee template-stringejä luettavuuden vuoksi).
- Vakioinut lainausmerkit backtickeiksi mallin kohdalla (ja käyttäisi muuten kaksinkertaisia lainausmerkkejä johdonmukaisesti, jos ei olisi mallia).
- Lisännyt puolipisteen (`;`) `return`-lauseen loppuun.
- Varmistanut oikean välilyönnin aaltosulkeiden ja sulkujen ympärillä.

Kehittäjä ei muotoillut koodia manuaalisesti – hän vain tallensi tiedoston, ja Ultracite hoiti loput. Tuloksena on siistimpi ja yhtenäisempi koodi.

Ultracite myös varoittaa, että `name` ei ole tyypitetty, ja ehdottaa tyypin lisäämistä.

## Tiukan yhtäsuuruuden pakottaminen

### Ennen (mahdollinen bugi löysän yhtäsuuruuden vuoksi)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}
```

Tässä koodi käyttää löysää yhtäsuuruutta (`==`) vertaillakseen `response.status` arvoon `200`. Löysä yhtäsuuruus voi olla virhealtis tyyppimuunnosten vuoksi (esim. `response.status` voi olla merkkijono `"200"` ja silti läpäistä ehdon). Ultraciten tiukat säännöt todennäköisesti pakottavat käyttämään `===`-vertailuja.

### Jälkeen (Ultraciten automaattinen korjaus käytetty)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status === 200) { // [!code highlight]
  isValid = true;
}
```

Ultracite korvasi automaattisesti `== 200` arvolla `=== 200`. Tämä pieni muutos estää hienovaraisia bugeja. Korjaus tehtiin tallennettaessa osana `source.fixAll.biome` -toimintoja. Tällainen sääntö (vastaava kuin ESLintin `eqeqeq`) varmistaa, että kehittäjät käyttävät tiukkaa yhtäsuuruustarkistusta.

Lisäksi Ultracite varoittaa myös siitä, että `isValid` ei koskaan käytetä, ja ehdottaa sen poistamista.

## Importtien järjestäminen ja siivoaminen

### Ennen (järjestämättömät importit)

```tsx title="index.tsx"
import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Importit ovat tässä aakkosjärjestyksestä poikkeavassa järjestyksessä, ja `helper`-importtia ei koskaan käytetä tiedostossa.

### Jälkeen (tallennuksen jälkeen Ultraciten avulla)

```tsx title="index.tsx"
import React from 'react'; // [!code highlight]
import A from './a-module'; // [!code highlight]
import Z from './z-module'; // [!code highlight]
import { helper } from './util'; // [!code --]

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Ultracite (Biome:n organize imports -ominaisuuden kautta) laittoi importit aakkosjärjestykseen moduulin nimen mukaan. Se myös poisti käyttämättömän `helper`-importin automaattisesti. Ennen/jälkeen-ero tapahtuu heti tallennettaessa, jolloin import-osion siisteys säilyy:

- Ei käyttämättömiä importteja tiedostosi yläosassa.
- Deterministinen importtien järjestys (jotta merge- ja diff-tilanteet eivät sekoitu eri kehittäjien lisäämien eri järjestysten takia).

Tämä johtaa helpommin ylläpidettävään koodiin, erityisesti tiedostoissa, joissa on paljon importteja.

## Saavutettavuuskorjaus

### Ennen

```tsx title="Button.tsx"
<button onClick={submitForm}>
  Open modal
</button>
```

Painikkeen oletustyyppi on `submit`, mikä aiheuttaa lomakkeen lähettämisen, jos painike sijaitsee form-elementin sisällä. Tämä ei todennäköisesti ole haluttu käyttäytyminen React-sovelluksessa. Ultracite varoittaa tästä ja tarjoaa pikakorjauksen muuttaa tyyppi `button`:iksi.

### Jälkeen (manuaalinen tai pikakorjaus)

```tsx title="Button.tsx"
<button onClick={submitForm} type="button">
  Open modal
</button>
```

Tyyppi on nyt `button`, mikä estää mahdollisen yläkerran lomakkeen lähettämisen, kun painiketta klikataan.

---

Nämä esimerkit osoittavat, kuinka Ultracite parantaa koodin laatua:

- Muotoilu- ja tyylijohdonmukaisuus ilman vaivaa.
- Automaattiset korjaukset moniin yleisiin ongelmiin (joten harvoin tarvitsee korjata pieniä asioita käsin).
- Oikeiden ongelmien tunnistaminen (jotta voit korjata ne varhaisessa kehitysvaiheessa).

Käyttämällä Ultracitea koodisi ei ainoastaan pysy siistinä, vaan on myös vähemmän bugeja sisältävää ja saavutettavampaa, kiitos sääntöihin koodatun kollektiivisen tietämyksen.